<template>
	<div>
        <div class="search-box">
            <el-select class="mr10" v-model="query.project_id" multiple filterable placeholder="项目编号">
                <el-option
                    v-for="proj_id in projectList"
                    :key="proj_id"
                    :label="proj_id"
                    :value="proj_id">
                </el-option> 
            </el-select>
            <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
			<template v-if="tableName === 'samRet'">
				<el-button type="warning" :icon="RefreshLeft" @click="handleReturn" >样品退回</el-button>
			</template>
			<slot name="s1"></slot>
		</div>
        <el-table ref="multipleTable" :data="tableSplit()" border header-cell-class-name="table-header" 
        @selection-change="handleSelection">
            <el-table-column prop="id" label="ID" width="75" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column prop="receipt_id" label="领用编号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="project_id" label="项目编号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="sample_id" label="样品编号" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column sortable prop="sample_name" label="样品名称" align="center" show-overflow-tooltip></el-table-column>
			<!-- <el-table-column prop="lot_number" label="批号" align="center" show-overflow-tooltip></el-table-column> -->
			<!-- <el-table-column prop="sample_amount" label="库存量" align="center" show-overflow-tooltip></el-table-column> -->
            <el-table-column prop="receipt_amount" label="领用量" align="center" show-overflow-tooltip></el-table-column>
			 <el-table-column prop="return_amount" label="退回量" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column prop="size" label="原始规格" align="center" show-overflow-tooltip></el-table-column>
			<!-- <el-table-column prop="reason" label="领用目的" align="center" show-overflow-tooltip></el-table-column> -->
            <!-- <el-table-column prop="locale" label="储存地点" align="center" show-overflow-tooltip></el-table-column> -->
			<el-table-column prop="service_name" label="检测项目" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column sortable prop="create_time" label="创建时间" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column sortable width="120px" prop="dflag" label="领用分装样品" align="center" show-overflow-tooltip>
				<template #default="scope">
					<el-tag v-if="scope.row.dflag===1||scope.row.dflag===true" type="success">是</el-tag>
					<el-tag v-if="scope.row.dflag===0||scope.row.dflag===false" type="warning">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable width="90px" prop="rflag" label="分装退回" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.rflag===-1" type="info">待定</el-tag>
					<el-tag v-if="scope.row.rflag===1" type="success">是</el-tag>
					<el-tag v-if="scope.row.rflag===0" type="warning">否</el-tag>
				</template>
			</el-table-column>
			<el-table-column sortable prop="rec_stat" width="110px" label="领用状态" align="center" show-overflow-tooltip>
				<template #default="scope">
					<el-tag v-if="scope.row.rec_stat===0" type="info">领用审核中</el-tag>
					<el-tag v-if="scope.row.rec_stat===1" type="success">领用通过</el-tag>
					<el-tag v-if="scope.row.rec_stat===2" type="warning">领用不通过</el-tag>
					<el-tag v-if="scope.row.rec_stat===3" type="warning">退回审核中</el-tag>
					<el-tag v-if="scope.row.rec_stat===4" type="primary">退回通过</el-tag>
					<el-tag v-if="scope.row.rec_stat===5" type="danger">退回不通过</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="120px" label="操作" align="center">
				<template #default="scope">
					<el-button 
						v-if="scope.row.rec_stat!==2&&scope.row.rec_stat!==5" 
						type="primary" 
						size="small" 
						:icon="View">
						信息查看
					</el-button>
					<el-button
						v-if="scope.row.rec_stat===2||scope.row.rec_stat===5"
						type="warning"
						size="small"
						:icon="Edit"
						@click="handleReCheck(scope.row)"
						v-permiss="15"
					>
						编辑重审
					</el-button>
				</template>
			</el-table-column>
			<el-table-column type="selection"></el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                background
                layout=" prev, pager, next,jumper,total"
                :current-page="state.pageIndex"
                :page-size="state.pageSize"
                :total="pageTotal"
                @current-change="handlePageChange"
            ></el-pagination>
        </div>
		<el-dialog
			title="样品退回单"
			v-model="editVisible"
			width="1300px"
			destroy-on-close
			:close-on-click-modal="false"
			@close="closeDialog"
		>
			<SampleReturn :tableData="returnSample" :closeDialog="closeDialog" />
		</el-dialog>
		<el-dialog
			title="领用重审"
			v-model="reReceiptVisible"
			width="800px"
			destroy-on-close
			:close-on-click-modal="false"
			@close="closeDialog"
		>
			<ReceiptRecheck :data="rowData" :edit="idEdit" :closeDialog="closeReCheckDialog"/>
		</el-dialog>
		<el-dialog
			title="退回重审"
			v-model="reReturnVisible"
			width="800px"
			destroy-on-close
			:close-on-click-modal="false"
			@close="closeDialog"
		>
			<ReturnRecheck :data="rowData" :edit="idEdit" :closeDialog="closeReCheckDialog" />
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
/* 引入模块 */
import { pa } from 'element-plus/es/locale'
import { ref,reactive, onBeforeMount,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Search, Edit,View,RefreshLeft } from '@element-plus/icons-vue'
import SampleReturn from '../../sample/sample_return.vue'
import ReceiptRecheck from './receipt_recheck.vue'
import ReturnRecheck from './return_recheck.vue'
import useReceipt from '../../../hooks/Receipt/useReceipt'
import useUtils from '../../../hooks/useUtils'

const { getReceipt,queryReceiptProject } = useReceipt()
const props = defineProps({
	tableName: {
		type:String,
		required: false
	}
})
/* 项目检索 */
const pageTotal = ref(0)
const query = reactive({
	project_id: '',
	limit:20,
 	pageIndex: 1,
 	pageSize: 20,
 	pageTotal:pageTotal
})
/* 检索信息方法 */
const handleSearch = () => {
 	if(query.project_id.length === 0){
		ElMessage({
			type: 'error',
 			message: `请选中至少一个项目！！`,
		})
 	}else{
 		queryReceiptProject(query).then( res=>{
			tableData.value=res.data
		})
 	}
}
/* 创建表格模板 */                                                                                                                                                                         
interface TableItem { 
	id: number;
	project_id: string;
	receipt_id: string;
	sample_id: string;
	sample_name: string;
	sample_amount: number;
	receipt_amount: number;
	return_amount:number;
	service_name: string;
	size: string;
	reason: string;
	dflag: number;
	rflag: number;
	status: number;
	rec_stat: number;
	create_time: string;
}
const tableData = ref<TableItem[]>([])
const state = reactive({
	page:1,
	limit:20,
	pageIndex: 1,
	pageSize: 20,
	total:pageTotal
})
/* 数据分页 */
const tableSplit = () => {
	if(props.tableName==="recQue"){
		const table = ref(tableData.value.filter(
			(item,index) => {
				return item.rec_stat !== 1
			}
		))
		pageTotal.value = table.value.length
		return(table.value.filter(
			(item,index) => {
				return index < state.page * state.limit && index >= state.limit*(state.page - 1) 
			}
		))
	}
	if(props.tableName==="samRet"){
		const table = ref(tableData.value.filter(
			(item,index) => {
				return item.rec_stat === 1
			}
		))
		pageTotal.value = table.value.length
		return(table.value.filter(
			(item,index) => {
				return index < state.page * state.limit && index >= state.limit*(state.page - 1)
			}
		))
	}
}
const handlePageChange = (val: number) => {
	state.pageIndex = val;
	state.page = val;
};
/* 获取表格多选结果 */
let multiple_selection = reactive([])
const handleSelection = (val:any) => {
	if(val.length === 0){
	} else {
		multiple_selection = val
	}
}
const editVisible = ref(false)
const returnSample = ref([])
const handleReturn = () => {
	editVisible.value=true
	returnSample.value=[]
	for(let item of multiple_selection){
		if(item.rec_stat===0){
			ElMessage.warning(
				"领用单" 
				+ item.receipt_id 
				+ "未审核，无法进行样品退回！"
			)
		}else{
			returnSample.value.push(item)
		}
	} 
}

const closeDialog = () => {
	editVisible.value=false
}
/* 挂载表格数据 */
const reload = () => {
	getReceipt().then(res=>{
		tableData.value=res.data
		pageTotal.value=res.data.length
	})
}
defineExpose({
	reload,
})
/* 样品重审 */
const reReceiptVisible=ref(false)
const reReturnVisible=ref(false)
const rowData = ref({});
const idEdit = ref(false)
const handleReCheck = (row: TableItem) => {
	rowData.value = row
	idEdit.value = true
	if(row.rec_stat === 2){
		reReceiptVisible.value=true
	}else if(row.rec_stat === 5){
		reReturnVisible.value=true
	}
}
const closeReCheckDialog = () => {
	reload()
	reReceiptVisible.value = false
	reReturnVisible.value = false
}
/* 获取项目编号 */
const projectList = ref([])
/* 去除表格重复 */
const { arrRemoveDup } = useUtils()
onMounted(()=>{
	reload()
	getReceipt().then( res => {
		for( const [key,value] of Object.entries(res.data)){
			projectList.value.push(value["project_id"])
		}
		projectList.value = arrRemoveDup(projectList.value)
	})
})
</script>

<style scoped>
.search-box {
	margin-bottom: 20px;
	float:left
}

.mr10 {
	margin-right: 10px;
} 
.el-select {
	width: 800px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}

.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.upload-demo {
    width: 360px;
}

</style>